<template>
	<el-menu
		active-text-color="#ffd04b"
		:background-color="mainColor"
		text-color="#fff"
		router
		:default-active="defaultActive"
		:unique-opened="true"
		:collapse-transition="false"
		:collapse="collapse"
		@select="selectMenuEvent"
	>
		<template v-for="item in menus" :key="item.path">
			<el-sub-menu v-if="item.child && item.child.length" :index="item.child[0].path">
				<template #title>
					<el-icon><location /></el-icon>
					<span>{{ item.title }}</span>
				</template>
				<el-menu-item :index="v.path" v-for="v in item.child" :key="v.path">
					<el-icon><Aim /></el-icon>
					<span>{{ v.title }}</span>
				</el-menu-item>
			</el-sub-menu>
			<el-menu-item v-else :index="item.path">
				<el-icon><Aim /></el-icon>
				<span>{{ item.title }}</span>
			</el-menu-item>
		</template>
		
	</el-menu>
</template>

<script setup>
	import bus from '@/utils/mitt'
	import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'

	import { useRoute } from 'vue-router';
	let route = useRoute()
	console.log('route=>', route)

	import { mainStore } from '@/store/index.js'
	const store = mainStore()

	let mainColor = ref(store.getters_mainColor)
	bus.on('changeMainColor', (e) => {
		console.log('changeMainColor')
		mainColor.value = e
	})

	// 菜单
	import { menuStore } from '@/store/menuStore.js'
	const useMenuStore = menuStore()
	let menus = reactive([])
	let defaultActive = ref('')
	let collapse = ref(false)
	bus.on('collapseChange', (e) => {
		console.log('collapseChange')
		collapse.value = e
	})
	onBeforeMount(async() => {
		await useMenuStore.getMenusList()
		console.log('useMenuStore.menus', useMenuStore.menus)
		menus = Object.assign(menus, useMenuStore.menus)
		defaultActive.value = route.path || '/index'
		// 触发header里面包屑导航的更新
		bus.emit('activeMenu', defaultActive.value)
	})
	// 选择菜单事件
	function selectMenuEvent(path) {
		bus.emit('activeMenu', path)
	}
	onBeforeUnmount(() => {
		bus.off('changeMainColor')
		bus.off('collapseChange')
	})
</script>

<style>
.el-menu{
	border-right: none !important;
}
</style>